<template>
    <h1>加加减减</h1>
    <ul>
        <li v-for="(item, index) in myarr" :key="index">
            {{ item }}
            <button @click="delbtn(index)">删除</button>
        </li>
    </ul>
    <button @click="addbtn()">添加生成</button>


    <br>
    <hr>
    <h1>帅哥美女大步向前走</h1>
    <ul>
        <li v-for="item in arr">
            {{ item }}
        </li>
    </ul>
    <button @click="btn">走一走</button>

</template>
<script>
export default {
    name: "Anli",
    data() {
        return {
            arr: ["痞帅", "靓女", "小鲜肉", "猿人"],
            myarr: [1, 2, 3, 4]
        };
    },
    methods: {
        delbtn(index) {
            console.log(index);
            this.myarr.splice(index,1)
        },
        addbtn() { 
            //console.log(Math.floor(Math.random() * 10) );
            this.myarr.push(Math.floor(Math.random() * 10));
            
        },
        btn() {
            //向数组的末尾添加一个元素
            this.arr.push(this.arr[0])
            //删除第一个元素
            this.arr.shift()
        }
    },
}

</script>